<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src='./utils/myquery.js'></script>
<script>

// 发送4个ajax请求
/*
$.ajax({
    type:"get",
    url:"/ajax/one",
    success(data){
        console.log(data);
    }
})
$.ajax({
    type:"get",
    url:"/ajax/two",
    success(data){
        console.log(data);
    }
})
$.ajax({
    type:"get",
    url:"/ajax/three",
    success(data){
        console.log(data);
    }
})
$.ajax({
    type:"get",
    url:"/ajax/four",
    success(data){
        console.log(data);
    }
})

console.log("over");
*/

//1 回调函数的嵌套  回调地狱(代码可读性差)
/*$.ajax({
    type:"get",
    url:"/ajax/one",
    success(data){
        console.log(data);
        //two
        $.ajax({
            type:"get",
            url:"/ajax/two",
            success(data){
                console.log(data);
                //three
                $.ajax({
                type:"get",
                url:"/ajax/three",
                success(data){
                    console.log(data);
                    $.ajax({
                        type:"get",
                        url:"/ajax/four",
                        success(data){
                            console.log(data);
                        }
       }
})
      }
})
    }
})
console.log("over");
*/
// 2 es6 中  Promise
//创建一个Promise
//resolve 已解决函数
//reject 失败的函数
/*
const promise = new Promise((resolve,reject)=>{
    $.ajax({
    type:"get",
    url:"/ajax/one",
    success(data){
         //console.log(data,typeof(data))
       if(data!==1){
        //console.log(data);
        //如果成功了则调用resolve函数
        resolve(data);
        }else{
            reject(data); 
        }
        //reject(new Error("请求异常")); 
    }
})
});

//console.log(promise);
//then 方法表示成功获得数据 
//catch表示失败获得数据
promise.then(function(result){
   console.log("成功了",result);
})
/* promise.catch((result)=>{
    console.log("失败了",result)
}) */

// 2 使用promise决绝回调嵌套的问题

/* new Promise((resolve,reject)=>{
$.ajax({
    type:"get",
    url:"/ajax/one",
    success(data){
        //console.log(data);
        resolve(data);
      }
    })
}).then((data)=>{
    console.log(data); 
    return  new Promise((resolve,reject)=>{
        $.ajax({
            type:"get",
            url:"/ajax/two",
            success(data){
                //console.log(data);
                resolve(data);
            }
            }) 
    });
}).then((data)=>{
    console.log(data);
    return  new Promise((resolve,reject)=>{
        $.ajax({
            type:"get",
            url:"/ajax/three",
            success(data){
                //console.log(data);
                resolve(data);
             }
            }) 
    });
}).then((data)=>{
    console.log(data);
    return  new Promise((resolve,reject)=>{
        $.ajax({
            type:"get",
            url:"/ajax/four",
            success(data){
                //console.log(data);
                resolve(data);
             }
            }) 
    })
}).then((data)=>{
    console.log(data);
}); */


/*-----------------------------------------------
Generator 它是一种解决异步编程的方案,它也是一个函数
它也是一个用来封装异步操作的容器，
他最大的特点就是可以让代码 分段 执行。
Generator 它会返回一个迭代器 通过迭代器的next方发来执行下一段的代码
它调用 next()方法时 会返回一个对象{ value, done}
value: yield后的值 
done： 表示是否已经遍历完
*/
// 定义Generator 函数 创建时 比普通函数多了个*
/* function* gen(){
   let data= yield new Promise((resolve,reject)=>{
    $.ajax({
    type:"get",
    url:"/ajax/one",
    success(data){
        resolve(data);
    }
})
   })
    console.log(data)
    data = yield new Promise((resolve,reject)=>{
    $.ajax({
    type:"get",
    url:"/ajax/two",
    success(data){
        resolve(data);
    }
})
   })
   console.log(data)
   data=yield new Promise((resolve,reject)=>{
    $.ajax({
    type:"get",
    url:"/ajax/three",
    success(data){
        resolve(data);
    }
})
   })
   console.log(data)
   data=yield new Promise((resolve,reject)=>{
    $.ajax({
    type:"get",
    url:"/ajax/four",
    success(data){
        resolve(data);
    }
})
   })
   console.log(data)
}; */
//let it = gen();
/*  it.next().value.then((data)=>{
      it.next(data).value.then((data)=>{
          it.next(data).value.then((data)=>{
              it.next(data).value.then((data)=>{
                  it.next(data)
              }) 
          })
      })
 }) */
 //辅助函数
 /*
 function run(gen){
     let it = gen();
     //封装next的执行
     function mynext(data){
        let {value,done} = it.next(data);
        //console.log(value,"==>>")
        if(done){
              return 
        }else
           value.then((data)=>{
            mynext(data)
           })
        }
        mynext();
     }
 run(gen);
*/
/*  let  iterator= test();
 let obj = iterator.next();
 console.log(obj);
  obj = iterator.next();
 console.log(obj);
 obj = iterator.next();
 console.log(obj);
 obj = iterator.next();
 console.log(obj);
 obj = iterator.next();
 console.log(obj); */
/*
 function* test2(){
     //这里的data是用来接收next(参数的)的值
     //不是 yield 的返回值（****）
   let data = yield  new Promise((resolve,reject)=>{
    $.ajax({
    type:"get",
    url:"/ajax/one",
    success(data){
       resolve(data);
    }
})
   });
   console.log("内部",data);
   yield 111
}
let it = test2();
let obj = it.next();
 obj.value.then((data)=>{
    console.log("外部的",data);
      it.next(data);
})
*/
  
// 4 async 和 await 来解决异步问题------------------------
//async 异步的
// await 等待
// 注意：注意：注意：
// await 必须用在 async 函数中
//await 后面跟都是promise

/* async function asyncMethod(){
    let data=  await new Promise((resolve,reject)=>{
        $.ajax({
            type:"get",
            url:"/ajax/one",
            success(data){
                resolve(data);
    }
})
     }) 
    console.log("data===>>",data)
     console.log("asyncMethod===>>")
 } 

 asyncMethod()*/

 async function asyncAjAX(){
      let data = await new Promise((resolve,reject)=>{
        $.ajax({
            type:"get",
            url:"/ajax/one",
            success(data){
                resolve(data)
            }
})
     });
        console.log(data);
     data = await new Promise((resolve,reject)=>{
        $.ajax({
            type:"get",
            url:"/ajax/two",
            success(data){
                resolve(data)
            }
})
        });
        console.log(data);
        data = await new Promise((resolve,reject)=>{
            $.ajax({
            type:"get",
            url:"/ajax/three",
            success(data){
                resolve(data)
            }
})
        });
        console.log(data);
        data = await new Promise((resolve,reject)=>{
            $.ajax({
            type:"get",
            url:"/ajax/four",
            success(data){
                resolve(data)
            }
})
        });
        console.log(data);
    }

 asyncAjAX();












console.log("over");

</script>